<template>
	<el-scrollbar class="sidebar-scroll">
        <el-menu  class="el-menu-vertical-demo" :default-active="this.$route.path"  :collapse="isCollapse" router>
            <template v-for="(item,index) in menuData">
                <el-submenu v-if="item.children && item.children.length > 0" :key="index" :index="item.path">
                    <template slot="title">
                    <i :class="item.meta.icon"></i>
                    <span>{{ item.meta.title }}</span>
                    </template>
                    <el-menu-item
                        v-for="(child,childIndex) in item.children"
                        :key="`${index}-${childIndex}`"
                        :index="child.path"
                    >
                    <i :class="child.meta.icon"></i>
                    <span>{{ child.meta.title }}</span>
                    </el-menu-item>
                </el-submenu>
                <el-menu-item v-else :key="index" :index="item.path">
                    <i :class="item.meta.icon"></i>
                    <span>{{ item.meta.title }}</span>
                </el-menu-item>
            </template>
        </el-menu>
	</el-scrollbar>
</template>
<script>
    import {mapState,mapGetters} from "vuex";
    export default{
        name:'SideBar',
        computed:{
            ...mapGetters(['firstMenu','subMenu','menuData']),
            isCollapse:function(){
                return this.$store.state.isCollapse;
            }
        },
        props:{
            collapse:{
                type:Boolean,
                default:false
            }
        },
        data(){
            return {
                currentRouter:''
            }
        },
        watch:{
            $route(to,from){
                this.currentRouter = to.path;
            }
        },
        mouted(){
            this.currentRouter = this.$route.path;
        },
        methods:{
        }
    }
</script>
<style lang="scss" scoped>
	.sidebar-scroll{
		height:calc(100% - 60px);
	}
	.sidebar{
		height:100%;
		text-align:left;
		border-right:none;
	}
    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 210px;
        min-height: 400px;
    }
</style>

